<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="频道管理" left-arrow @click-left="$router.back()" />
    <!-- 列表 -->
    <div class="list">
      <h1>点击删除频道</h1>
      <!-- 
            column-num: 自定义宫格的列数
         -->
      <van-grid :column-num="4" :gutter="10">
          <van-grid-item @click="delFn(index)" v-for="(value,index) in list" 
          :key="value.id" :text="value.name" />
      </van-grid>
    </div>
    <div class="list">、
      <h1>点击添加频道</h1>
      <!-- 
            column-num: 自定义宫格的列数
        -->
      <van-grid :column-num="4" :gutter="10">
        <van-grid-item @click="addFn(index)" v-for="(value,index) in delList" :key="value.id" :text="value.name" />
      </van-grid>
    </div>
  </div>
</template>

<script>
// 栏目列表的渲染
// 1、引入栏目列表接口函数
// 2、在created中调用接口请求并保存数据
// 3、根据保存的数据进行渲染
// 功能2：点击上方的列表删除对应的频道
// 1、绑定事件
// 2、在事件处理函数中，删除点击的那个频道即可（根据下标值删除）
// 3、将删除的频道添加到下方的列表中即可（delList数组）
import { category } from "@/api/common.js"
export default {
    data(){
        return {
            list: [],   // 默认的频道列表
            delList: [], // 被删除的频道列表
        }
    },
    watch: {
        list: {
            deep: true, // 深度侦听
            handler(){
                localStorage.setItem("list-70", JSON.stringify(this.list))
                localStorage.setItem("delList-70", JSON.stringify(this.delList))
            }
        }
    },
    created(){
        let list  = localStorage.getItem("defaultList")&&JSON.parse(localStorage.getItem("defaultList"))||[];
        // 获取到“关注”和“头条”进行判断，是否存在缓存
        if(list.length>0){
            this.list = JSON.parse(localStorage.getItem("list-70"));
            this.delList = JSON.parse(localStorage.getItem("delList-70"));
        }else{
            // 没有缓存从接口中获取
            category().then(res=>{
                // console.log(36,res);
                this.list = res.data.data;
                let result = this.list.splice(0,2);
                localStorage.setItem("defaultList",  JSON.stringify(result));
            })
        }

    },
    methods: {
        // 删除频道
        delFn(index){
            // 根据下标值删除数据
            let res = this.list.splice(index, 1);
            // 保存被删除的频道
            this.delList = [...this.delList,...res];
        },
        // 添加频道
        addFn(index){
            // 根据下标值删除数据
            let res = this.delList.splice(index, 1);
            // 把删除的频道添加到list数组中
            this.list = [...this.list, ...res];

        }
    }
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  border-bottom: 1px solid #ddd;
  .van-icon-arrow-left {
    color: #000;
  }
}
/deep/.van-grid-item__content {
  border: 1px solid #ddd;
}
.list {
  margin: 20px 0;
  padding: 0 10px;
  h1 {
    margin: 20px 0;
  }
}
</style>